<template>
  <v-content style="background-color: #f5f5f5">
    <div class="mw-column-style mw-main-background-white"
         style="width: 3.6rem;padding-left: 0.15rem;margin-bottom: 0.08rem;">
      <div class="mw-row-style" style="height: 0.49rem;align-items: center">
        <div class="mw-second-text-color" style="font-size: 0.15rem;margin-right:0.15rem;">收货人</div>
        <input id="name" class="menu-input" placeholder="请输入收货人姓名" v-model="data.inputname"/>
      </div>
      <div class="mw-horizon-divider"></div>
      <div class="mw-row-style" style="height: 0.49rem;align-items: center">
        <div class="mw-second-text-color" style="font-size: 0.15rem;margin-right:0.15rem;">电话号</div>
        <input id="mobile" type="number" class="menu-input" maxlength="11" placeholder="请输入收货人电话" v-on:input="data.checkmobilestatus()" v-model="data.inputmobile"/>
      </div>
    </div>
    <div class="mw-column-style mw-main-background-white"
         style="width: 3.6rem;padding-left: 0.15rem;margin-bottom: 0.08rem;">
      <div @click="pushdown" class="mw-row-spacebetween-style" style="height: 0.49rem;align-items: center">
        <div class="mw-second-text-color" style="font-size: 0.15rem;">所在地区</div>
        <div class="mw-row-style" style="align-items: center;margin-right: 0.15rem;">
          <div
            v-if="JSON.stringify(data.selectedProvince) != '{}' && JSON.stringify(data.selectedCity) != '{}'&&JSON.stringify(data.selectedDistrict) != '{}'"
            style="font-size: 0.15rem;margin-right: 0.1rem" class="mw-first-text-color">
            {{data.selectedProvince.name}}{{data.selectedCity.name}}{{data.selectedDistrict.name}}
          </div>
          <div v-else style="font-size: 0.15rem;color: #5789C2;margin-right: 0.1rem">选择地区</div>
          <img src="/static/order_confirm_address_more.png" style="width: 0.08rem;height:0.16rem;"/>
        </div>

      </div>
      <div class="mw-horizon-divider"></div>
      <div class="mw-row-style" style="height: 0.49rem;align-items: center">
        <input id="detailaddress" class="menu-input" placeholder="请输入详细地址" v-model="data.inputdetailaddress"/>
      </div>
    </div>
    <div @click="data.submit" class="mw-row-style" style="width: 3.75rem;height:0.79rem;justify-content: center;align-items: center">
      <div style="width:3.45rem;
height:0.49rem;
border-radius:0.08rem;
border:1px solid rgba(237,61,93,1);line-height: 0.49rem;text-align: center;font-size: 0.15rem;font-weight: bold;color: #ED3D5D">
        提交
      </div>
    </div>
    <div @click="hiddenBackground" @touchmove.prevent
         style="z-index:98;position:fixed;bottom:0;left:0;width:3.75rem;background-color: #000000"
         :style="{transition:`all ${frametime}s`,opacity:opacity,height:fullscreenheight,visibility:backgroundDisplay}"></div>
    <div
      style="z-index:99;padding-left:0.15rem;padding-right:0.15rem;position:fixed;width:3.45rem;background-color: #ffffff;left:0"
      :style="{transition:`all ${frametime}s`,bottom:frameY +'rem',height:frameheight + 'rem'}">
      <div class="mw-row-spacebetween-style mw-main-background-white"
           style="position:absolute;top:0;left:0.15rem;width: 3.45rem;height:0.5rem;align-items: center;font-size: 0.15rem">
        <div @click="cancel">取消</div>
        <div @click="confirm" style="color: #5789C2;">确定</div>
      </div>
      <div class="mw-horizon-divider" style="position: absolute;top:2rem;width: 100%"></div>
      <div class="mw-horizon-divider" style="position: absolute;top:2.5rem;width: 100%"></div>
      <div class="mw-row-style" style="margin-top:0.5rem" :style="{height:frameheight - 0.5 + 'rem'}">
        <div id="provincelist" class="mw-column-style" style="overflow:scroll;width: 1.15rem;align-items: center">
          <div id="provincesignal"></div>
          <div style="width:100%;height:1.5rem;display:table;"></div>
          <div v-for="(item,index) in data.provincelist">
            <div class="mw-single-line" style="line-height: 0.5rem;height:0.5rem;width: 1.15rem;align-items: center">
              {{item.name}}
            </div>
          </div>
          <div style="width:100%;height:1.5rem;display:table;"></div>
        </div>

        <div id="citylist" class="mw-column-style" style="overflow:scroll;width: 1.15rem;align-items: center">
          <div id="citysignal"></div>
          <div style="width:100%;height:1.5rem;display:table;"></div>
          <div v-for="(item,index) in data.citylist">
            <div class="mw-single-line" style="line-height: 0.5rem;height:0.5rem;width: 1.15rem;align-items: center">
              {{item.name}}
            </div>
          </div>
          <div style="width:100%;height:1.5rem;display:table;"></div>
        </div>

        <div id="districtlist" class="mw-column-style" style="overflow:scroll;width: 1.15rem;align-items: center">
          <div id="districtsignal"></div>
          <div style="width:100%;height:1.5rem;display:table;"></div>
          <div v-for="(item,index) in data.districtlist">
            <div class="mw-single-line" style="line-height: 0.5rem;height:0.5rem;width: 1.15rem;align-items: center">
              {{item.name}}
            </div>
          </div>
          <div style="width:100%;height:1.5rem;display:table;"></div>
        </div>
      </div>
    </div>
  </v-content>


</template>

<script>
  import utils from '../../utils'
  import httputil from '../../httputil'

  import {mapModules, mapRules} from 'vuet'

  export default {
    mixins: [
      mapModules({data: 'newaddress'}),
      mapRules({need: [{path: 'newaddress'}]}),
    ],
    components: {},
    data() {
      return {
        backgroundDisplay: "hidden",
        fullscreenheight: "0rem",
        opacity: 0,
        frameheight: 0,
        frameY: 0,
        frametime: 0,
        allitemheight: 0,

        provincesignalstartY: 0,
        canListenProvince: true,
        provincet1: 0,
        provincet2: 0,
        provincetimer: null,

        citysignalstartY: 0,
        canListenCity: true,
        cityt1: 0,
        cityt2: 0,
        citytimer: null,

        districtsignalstartY: 0,
        canListenDistrict: true,
        districtt1: 0,
        districtt2: 0,
        districttimer: null
      }
    },
    methods: {
      cancel() {

      },
      confirm() {
        debugger
        this.data.selectedProvince = this.data.provincelist[this.data.provinceitem]
        this.data.selectedCity = this.data.citylist[this.data.cityitem]
        this.data.selectedDistrict = this.data.districtlist[this.data.districtitem]
        this.hiddenBackground();
      },
      hiddenBackground() {
        this.frameY = -this.frameheight;
        this.frametime = 0.3;
        this.opacity = 0;
        this.backgroundDisplay = "hidden"
      },
      pushdown() {
        var that = this
        this.frameY = 0;
        this.frametime = 0.3;
        this.opacity = 0.5;
        this.backgroundDisplay = "visible"
        if (JSON.stringify(that.data.selectedProvince) != '{}') {
          that.data.provincelist = that.data.list.filter(
            function (x) {
              return x.parent_id == 0
            }
          )
          that.data.provinceitem = that.data.provincelist.findIndex(function checkIndex(x) {
            return x.id == that.data.selectedProvince.id;
          })
          that.data.citylist = that.data.list.filter(
            function (x) {
              return x.parent_id == that.data.provincelist[that.data.provinceitem].id
            }
          )
          that.data.cityitem = that.data.citylist.findIndex(function checkIndex(x) {
            return x.id == that.data.selectedCity.id;
          })
          that.data.districtlist = that.data.list.filter(
            function (x) {
              return x.parent_id == that.data.citylist[that.data.cityitem].id
            }
          )
          that.data.districtitem = that.data.districtlist.findIndex(function checkIndex(x) {
            return x.id == that.data.selectedDistrict.id;
          })
        } else {
          that.data.provincelist = that.data.list.filter(
            function (x) {
              return x.parent_id == 0
            }
          )
          that.data.provinceitem = 0
          that.data.citylist = that.data.list.filter(
            function (x) {
              return x.parent_id == that.data.provincelist[that.data.provinceitem].id
            }
          )
          that.data.cityitem = 0
          that.data.districtlist = that.data.list.filter(
            function (x) {
              return x.parent_id == that.data.citylist[that.data.cityitem].id
            }
          )
          that.data.districtitem = 0
        }
        setTimeout(function () {

          document.getElementById('provincelist').scrollTo({
            top: that.data.provinceitem * that.allitemheight
          });
          document.getElementById('citylist').scrollTo({
            top: that.data.cityitem * that.allitemheight
          });
          document.getElementById('districtlist').scrollTo({
            top: that.data.districtitem * that.allitemheight
          });
          that.provincesignalstartY = document.getElementById("provincesignal").getBoundingClientRect().bottom + that.data.provinceitem * that.allitemheight
          that.citysignalstartY = document.getElementById("citysignal").getBoundingClientRect().bottom + that.data.cityitem * that.allitemheight
          that.districtsignalstartY = document.getElementById("districtsignal").getBoundingClientRect().bottom + that.data.districtitem * that.allitemheight
        }, that.frametime * 1000 + 100)

      },
      isScrollEnd() {
        var that = this
        this.provincet2 = document.getElementById("provincesignal").getBoundingClientRect().bottom
        if (this.provincet2 === this.provincet1) {
          this.canListenProvince = false
          var distance = this.provincesignalstartY - this.provincet1;
          var itemheight = 0.5 * this.GLOBAL.ratio
          if (distance % itemheight < itemheight / 2) {
            document.getElementById('provincelist').scrollTo({
              top: parseInt((distance / itemheight)) * itemheight,
              behavior: "smooth"
            });
            that.data.provinceitem = parseInt((distance / itemheight))
          } else {
            document.getElementById('provincelist').scrollTo({
              top: (parseInt((distance / itemheight)) + 1) * itemheight,
              behavior: "smooth"
            });
            that.data.provinceitem = parseInt((distance / itemheight)) + 1
          }
          this.data.citylist = this.data.list.filter(
            function (x) {
              return x.parent_id == that.data.provincelist[that.data.provinceitem].id
            }
          )
          document.getElementById('citylist').scrollTo({
            top: 0,
            behavior: "smooth"
          });
          that.data.cityitem = 0
          this.data.districtlist = this.data.list.filter(
            function (x) {
              return x.parent_id == that.data.citylist[that.data.cityitem].id
            }
          )
          document.getElementById('districtlist').scrollTo({
            top: 0,
            behavior: "smooth"
          });
          that.data.districtitem = 0
          this.$forceUpdate()
        }
      },
      isScrollEndCity() {
        var that = this
        this.cityt2 = document.getElementById("citysignal").getBoundingClientRect().bottom
        if (this.cityt2 === this.cityt1) {
          this.canListenCity = false
          var distance = this.citysignalstartY - this.cityt1;
          var itemheight = 0.5 * this.GLOBAL.ratio
          if (distance % itemheight < itemheight / 2) {
            document.getElementById('citylist').scrollTo({
              top: parseInt((distance / itemheight)) * itemheight,
              behavior: "smooth"
            });
            that.data.cityitem = parseInt((distance / itemheight))
          } else {
            document.getElementById('citylist').scrollTo({
              top: (parseInt((distance / itemheight)) + 1) * itemheight,
              behavior: "smooth"
            });
            that.data.cityitem = parseInt((distance / itemheight)) + 1
          }

          this.data.districtlist = this.data.list.filter(
            function (x) {
              return x.parent_id == that.data.citylist[that.data.cityitem].id
            }
          )
          document.getElementById('districtlist').scrollTo({
            top: 0,
            behavior: "smooth"
          });
          that.data.districtitem = 0
          this.$forceUpdate()
        }
      },
      isScrollEndDistrict() {
        var that = this
        this.districtt2 = document.getElementById("districtsignal").getBoundingClientRect().bottom
        if (this.districtt2 === this.districtt1) {
          this.canListenDistrict = false
          var distance = this.districtsignalstartY - this.districtt1;
          var itemheight = 0.5 * this.GLOBAL.ratio
          if (distance % itemheight < itemheight / 2) {
            document.getElementById('districtlist').scrollTo({
              top: parseInt((distance / itemheight)) * itemheight,
              behavior: "smooth"
            });
            that.data.districtitem = parseInt((distance / itemheight))
          } else {
            document.getElementById('districtlist').scrollTo({
              top: (parseInt((distance / itemheight)) + 1) * itemheight,
              behavior: "smooth"
            });
            that.data.districtitem = parseInt((distance / itemheight)) + 1
          }
        }
      },
    },

    created() {

    },

    mounted() {
      var that = this
      this.fullscreenheight = this.GLOBAL.fullscreenheight
      this.frameheight = 4
      this.frameY = -this.frameheight
      this.allitemheight = 0.5 * this.GLOBAL.ratio
      document.getElementById('provincelist').addEventListener('scroll', () => {

        if (that.canListenProvince) {
          clearTimeout(that.provincetimer)
          that.provincet1 = document.getElementById("provincesignal").getBoundingClientRect().bottom
          that.provincetimer = setTimeout(function () {
            that.isScrollEnd()
          }, 200);
        }
      })
      document.getElementById('citylist').addEventListener('scroll', () => {
        if (that.canListenCity) {
          clearTimeout(that.citytimer)
          that.cityt1 = document.getElementById("citysignal").getBoundingClientRect().bottom
          that.citytimer = setTimeout(function () {
            that.isScrollEndCity()
          }, 200);
        }
      })
      document.getElementById('districtlist').addEventListener('scroll', () => {
        if (that.canListenDistrict) {
          clearTimeout(that.districttimer)
          that.districtt1 = document.getElementById("districtsignal").getBoundingClientRect().bottom
          that.districttimer = setTimeout(function () {
            that.isScrollEndDistrict()
          }, 200);
        }
      })
      document.getElementById('provincelist').addEventListener('touchstart', () => {
        that.canListenProvince = true
      })
      document.getElementById('citylist').addEventListener('touchstart', () => {
        that.canListenCity = true
      })
      document.getElementById('districtlist').addEventListener('touchstart', () => {
        that.canListenDistrict = true
      })
    },

  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .menu-input {
    font-size: 0.15rem;
    color: #333333;
    width: 2.8rem;
    border: none
  }
</style>
<style type="text/css">

  input::-webkit-input-placeholder { /*WebKit browsers*/
    font-size: 0.15rem;
    color: #cccccc;
  }


</style>
